import React, { useState } from "react";
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { static_router } from "../../router";
const { Header, Content, Sider } = Layout;
const items1 = ["1", "2", "3"].map((key) => ({
  key,
  label: `nav ${key}`,
}));

const App = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  // 从 本地存储 获取用户信息  userInfo
  const [userInfo] = useState(
    JSON.parse(localStorage.getItem("userInfo"))
  );
  const items2 = static_router
    .filter((v) => {
      if (v.meta.hidden) return false;
      return true;
    })
    .filter((v) => {
      if (!v.meta.role) return true;

      return v.meta.role.includes(userInfo.role);
    })
    .map((v) => {
      return {
        key: v.path,
        label: v.meta.title,
      };
    });

  console.log(userInfo);
  return (
    <Layout>
      <Header
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={items1}
          style={{
            flex: 1,
            minWidth: 0,
          }}
        />

        <div
          style={{ color: "#ffffff", display: "flex", alignItems: "center" }}
        >
          <span>用户： {userInfo.nickname}</span>--
          <span>角色： {userInfo.role}</span>
          <img
            src={userInfo.avatar}
            alt=""
            height={30}
            style={{ marginLeft: 10 }}
          />
        </div>
      </Header>
      <Layout>
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{
              height: "100%",
              borderRight: 0,
            }}
            items={items2}
          />
        </Sider>
        <Layout
          style={{
            padding: "0 24px 24px",
          }}
        >
          {/* 废弃了 */}
          {/* `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead. */}
          {/* <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb> */}
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default App;
